<template>
  <div class="popver">
    <el-popover
      placement="bottom-end"
      width="400"
      trigger="click"
      popper-class="lm-popver"
      :value="isShow"
      @show="clickShow"
    >
      <el-button slot="reference" size="mini">高级搜索</el-button>
      <el-collapse-transition>
        <div class="popver-content">
          <p class="popver-header">
            <span class="el-icon-d-arrow-right" @click="colsePopver"></span>
            <span>
              <el-button class="filter-item" size="mini" type="success" @click="queryAdvanced">查询</el-button>
              <el-button class="filter-item" size="mini" type="warning" @click="resetAdvanced">重置</el-button>
            </span>
          </p>
          <slot></slot>
        </div>
      </el-collapse-transition>
    </el-popover>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    colsePopver() {
      this.isShow = false;
    },
    clickShow() {
      this.isShow = true;
    },
    queryAdvanced() {
      this.colsePopver();
      this.$emit('queryAdvanced');
    },
    resetAdvanced() {
      this.$emit('resetAdvanced');
    }
  }
};
</script>
<style lang="scss" scoped>
.popver{
  display: inline-block;
}
.el-popover{
  padding: 0 !important;
}
.popver-header{
  margin: 0;
  height: 30px;
  line-height: 30px;
  span:nth-child(2){
    float: right;
  }
}
.el-icon-d-arrow-right{
  cursor: pointer;
}
</style>
